<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 96216
  Date: 2017/8/8
  Time: 15:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>专业管理</title>
</head>
<body>
<!--banner-->
<jsp:include page="/manager/common/head.jsp"></jsp:include>
<!--内容-->
<div class="container">
    <ol class="breadcrumb">
        <li><a href="${pageContext.request.contextPath}/m/main">首页</a>
        </li>
        <li class="active">专业管理</li>
    </ol>
    <div class="row">
        <div class="col-md-4"></div>

        <div class="col-md-5">
            <form class="navbar-form navbar-left" role="search" action="${pageContext.request.contextPath}/m/getSpecialty">
                <div class="form-group">
                    <input type="text" name="speName" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-success">搜索</button>
            </form>
        </div>
        <div class="col-md-3">
            <a href="${pageContext.request.contextPath}/m/addSpe" class="btn btn-primary" role="button">添加专业</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <table class="table table-bordered table-hover table-responsive" id="specialty_table">
                <thead>
                <tr>
                    <th>专业编号</th>
                    <th>专业名称</th>
                    <th>专业人数</th>
                    <th>专业管理</th>
                </tr>
                </thead>
                <tbody>

                </tbody>


            </table>
        </div>
        <div class="row">
            <div class="col-md-6" id="page_info_area">

            </div>
            <div class="col-md-6" id="page_nav_area">

            </div>

        </div>
    </div>
</div>
<script type="text/javascript">

    //页面加载完成后直接发送ajax请求
    $(function () {
        to_page(1);
    });

    function to_page(pn) {
        $.ajax({
            url:"${pageContext.request.contextPath}/m/getSpecialties",
            data:"pn="+pn,
            type:"GET",
            success:function (result) {
                if(result.extend.page!=null){
                    // console.log(result);
                    //1解析数据屏显示员工数据
                    build_specialty_table(result);
                    //2，解析并显示分页信息
                    build_page_info(result);
                    build_page_nav(result);
                }else{
                    swal("Failed..", "抱歉，没有查找到您想要的结果", "error");
                }

            }
        });
    }

    function build_specialty_table(result) {
        //加载之前清空
        $("#specialty_table tbody").empty();

        var spe=result.extend.page.list;
        $.each(spe,function (index,item) {
            var specialtyIdTd=$("<td></td>").append(item.specialtyId);
            var nameTd=$("<td></td>").append(item.name);
            var studentNumTd=$("<td></td>").append(item.studentNum);
            var deleteBtn=$("<a></a>").attr("href","${pageContext.request.contextPath}/m/delSpecialty?specialtyId="+item.specialtyId).addClass("btn btn-danger").append($("<span></span>").addClass("glyphicon glyphicon-remove")).append("删除");
            var infoBtn=$("<a></a>").attr("href","${pageContext.request.contextPath}/m/toStudent?specialtyId="+item.specialtyId).addClass("btn btn-info").append($("<span></span>").addClass("glyphicon glyphicon-info-sign")).append("查看专业");
            var btnTd=$("<td></td>").append(" ").append(deleteBtn).append(" ").append(infoBtn);
            $("<tr></tr>").append(specialtyIdTd)
                .append(nameTd)
                .append(studentNumTd)
                .append(btnTd)
                .appendTo("#specialty_table tbody");
        });
    }
    function build_page_info(result) {
        //加载之前清空
        $("#page_info_area").empty();
        $("#page_info_area").append("当前第"+result.extend.page.pageNum+
            "页,共有"+result.extend.page.pages+"页,共有"+result.extend.page.total+"条记录");
    }
    function build_page_nav(result) {
        //加载之前清空
        $("#page_nav_area").empty();
        var ul=$("<ul></ul>").addClass("pagination");

        var firstPageLi=$("<li></li>").append($("<a></a>").append("首页"));
        var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;"));
        if(result.extend.page.hasPreviousPage==false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageLi.click(function () {
                to_page(result.extend.page.pageNum-1);
            });
        }


        var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi=$("<li></li>").append($("<a></a>").append("尾页"));
        if(result.extend.page.hasNextPage==false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            nextPageLi.click(function () {
                to_page(result.extend.page.pageNum+1);
            });
            lastPageLi.click(function () {
                to_page(result.extend.page.pages);
            });
        }

        ul.append(firstPageLi).append(prePageLi);

        $.each(result.extend.page.navigatepageNums,function (index,item) {
            var numLi=$("<li></li>").append($("<a></a>").append(item))
            if(result.extend.page.pageNum==item){
                numLi.addClass("active");
            }
            numLi.click(function () {
                to_page(item);
            })
            ul.append(numLi);
        });
        ul.append(nextPageLi).append(lastPageLi);
        var navEle=$("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }
</script>

</body>
</html>
